<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{
			margin:0;
			padding:0;
		}
		#box{
			display: flex;
			width:500px;
			height:300px;
			position: relative;
		}
		.border{
			width:20px;
			height:300px;
			background: red;
			cursor: col-resize;
		}
		.content{
			flex: 1;
			height:300px;
			background: palegoldenrod;
		}
		#gradual1,#gradual2,#gradual3,#gradual4{
			width:500px;
			height:400px;
			
		}
		#gradual1{
			background: linear-gradient(red, blue);
		}
		#gradual2{
			background: linear-gradient(to top, red , blue);
		}
		
		#gradual3{
			background: linear-gradient(180deg, red, blue);
		}
		#gradual4{
			background: repeating-radial-gradient(red, yellow 40%, green 10%);
		}
	</style>
	<body>
		<div id="box">
			<div class="border"></div>
			<div class="content">123</div>			
		</div>
		<div id="gradual1"></div>
		<div id="gradual2"></div>
		<div id="gradual3"></div>
		<div id="gradual4"></div>
	</body>
	<script src="jquery-2.1.0.js"></script>
	<script>
		$(".border").mousedown(function(e){
			
			$(document).mousemove(function(e){				
				let X = e.clientX;
				$(".border").width(X);
			})
			$(document).mouseup(function(e){
				$(this).unbind('mousemove');
			})
		})
	</script>
</html>
